<template>
  <div class="msg">
    <div class="msg_content" ref="msg" :style="{top: top}">
      <img class="msg_bg" src="@/assets/images/msgBg.png" alt="">
      <div class="text">{{msgValue.msg}}</div>
    </div>
  </div>
</template>

<script>
    export default {
      name: "msg",
      props: ['msgValue'],
      data(){
       return{
         top: -204
       }
      },
      watch:{
        msgValue: function () {
          // console.log(this.$refs.msg.style.top);
          this.top = 50
          setTimeout( () => {
            this.top = -204
            if(this.msgValue.dosome) this.msgValue.dosome()
          }, 2000)
        }
      }
    }
</script>

<style scoped lang="less">
.msg{
  position: absolute;
  left: 0px;
  top: 0px;
  width: 1920px;
  height: 1080px;
  overflow: hidden;
  .msg_content{
    position: absolute;
    left: 658px;
    width: 604px;
    height: 204px;
    transition-duration: 400ms;
    .msg_bg{
      position: absolute;
      left: 0px;
      top: 0px;
      width: 604px;
      height: 204px;
    }
    .text{
      position: absolute;
      left: 70px;
      top: 50px;
      width: 500px;
      height: 180px;
      line-height: 36px;
      font-size: 36px;
      text-align: center;
    }
  }

}
</style>
